<template>
	<div style="width: 100%;height: 100%;overflow:hidden;">
		<Card style="height: 100%;">
			<template #title>
				<slot name="title"></slot>
			</template>
			<div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
				<div ref="body" style="flex: 1;overflow:hidden;">
					<slot :h="h" name="body"></slot>
				</div>
				<div>
					<slot name="footer">
						<sl-page v-bind="pageParms" @nextPage="$emit('nextPage',$event)"
								 @pageChange="$emit('pageChange',$event)"/>
					</slot>
				</div>
			</div>
			<div>
				<slot name="modal"></slot>
			</div>
		</Card>
	</div>
</template>

<script>
import SlPage from "@/components/sl-page.vue";

export default {
	name: "sl-report",
	components: {SlPage},
	props: {
		pageParms: {
			type: Object,
			default: () => {
				return {
					pageIndex: 1,
					pageSize: 10,
					total: 0
				}
			}
		}
	},
	data() {
		return {
			h: 0,
		}
	},
	mounted() {
		let element = this.$refs['body'];
		let observer = new ResizeObserver(() => {
			this.h = this.$refs.body?.offsetHeight
		});
		observer.observe(element); // 监听元素
		this.h = this.$refs.body.offsetHeight
	}
}
</script>

<style scoped>
/deep/ .ivu-card {
	display: flex;
	flex-direction: column;
}

/deep/ .ivu-card-body {
	flex: 1;
}

</style>
